<template>
    <div class="medicine-box">
        <div class="box-left">
            <angleBox class="item">
                <cardBox title="连锁门店">
                    <echarts :option="option_d"/>
                </cardBox>
            </angleBox>
            <angleBox class="item">
                <cardBox title="单体药店">
                    <echarts :option="option_b"/>
                </cardBox>
            </angleBox>
            <angleBox class="item">
                <cardBox title="重点药品监管">
                    <switchBox :data="swiperData" :config="swiperProps" showHeader>
                        <template #content="{ data }">
                            <echarts v-if="data.option" :option="data.option"/>
                        </template>
                    </switchBox>
                </cardBox>
            </angleBox>
        </div>
        <div class="box-center">
            <angleBox class="item-top">
                <geoMap/>
            </angleBox>
            <angleBox class="item-bottom">
                <cardBox title="数据库">
                    <echarts :option="option_a"></echarts>
                </cardBox>
            </angleBox>
        </div>
        <div class="box-right">
            <angleBox class="item"></angleBox>
            <angleBox class="item"></angleBox>
            <angleBox class="item"></angleBox>
        </div>
    </div>
</template>

<script setup>
    import chartsUtils from '@/hooks/utils/chart/chartutils.ts';
    import mapData from './data.json'

    const c_data = [
        { Name: '重庆', Data: { 新增: 110, 在线: 255, 在线率: 23 }},
        { Name: '北京', Data: { 新增: 30, 在线: 321, 在线率: 17 } },
        { Name: '上海', Data: { 新增: 20, 在线: 235, 在线率: 20 } },
        { Name: '广州', Data: { 新增: 10, 在线: 156, 在线率: 16 } },
        { Name: '深圳', Data: { 新增: 12, 在线: 132, 在线率: 14 } }
    ];
    const d_data = [
        { Name: '重庆', Data: { 新增: 110} },
        { Name: '北京', Data: { 新增: 30 } },
        { Name: '上海', Data: { 新增: 20 } },
        { Name: '广州', Data: { 新增: 10 } },
        { Name: '深圳', Data: { 新增: 12 } }
    ];


    const getOption = (config)=>{
        return chartsUtils.setBarChartOptions(config)
    }

    const getMapOption = ()=>{
        const dataSource = mapData.Data
        const Icon1 ='image://';
        const Icon2 ='image://';
        const Icon3 ='image://';

        const Datas = [
            {name:'医疗机构', icon:Icon1, data:[]},
            {name:'连锁门店', icon:Icon2, data:[]},
            {name:'单体药店', icon:Icon3, data:[]}
        ]

        Datas.forEach(item=>{
            const {name , data} = item
            dataSource.forEach(key=>{
                const { Longitude, Latitude, Value, Name } = key
                data.push({
                    name:Name,
                    value:[ Longitude, Latitude, Value[name] || 0]
                })
            })
        })
        const options = chartsUtils.setMapOptions();
        return options
    }

    // 使用示例
    const option_c = getOption({ data: c_data, line: ['在线率'], unit: '路' , stack:'bar' });

    const option_d = getOption({ data: d_data,  unit: '户' });

    const option_b = getOption({ data: d_data, color:["#07FCFE"], unit: '户'  });

    const option_a = chartsUtils.setSymbolBarOptions({ data: d_data });

   // const option_e = getMapOption({ data: d_data });

    // 轮播组件自带的参数
    const swiperProps= {
        autoPlay: true,
        indicatorType:"never",
        showArrow:"never",
        moveSpeed: 5000,
        change:(index)=>{
            swiperData[index-1].option = option_c
        }
    }

    const swiperData= reactive([
        { title:'今日', value: 1 , option:option_c },
        { title:'7天', value: 2 }
    ]);





    // onMounted(()=>{
    //     debugger
    //     setTimeout(() => {
    //         options.value = 
    //     }, 2000);
    // });

</script>

<style lang="less" scoped>
    .medicine-box{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .box-left, .box-right{
            width: 24%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .item{
                width: 100%;
                height: 31%;
            }
        }
        .box-center{
            width: 49%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .item-top{
                width: 100%;
                height: 66%;
            }
            .item-bottom{
                width: 100%;
                height: 31%;
            }
        }
    }
</style>